<template>
	<div class="container">
		<v-toolBar :fullPath='postData.opera' :tableColumns='tableColumns' @changeLie='getChangeLie'
			@getSearchIPArr='getToolBarSearchIPArr' @getSearchIP='getToolBarSearchIP'>
		</v-toolBar>
		<el-table v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
			:data="tableData" border stripe style="width: 100%">
			<el-table-column type="index" width="50" label="序号">
			</el-table-column>
			<template v-for="(item) in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" :sortable="item.sortable" :width="item.width"
					align="center" v-if="item.isShow" :key="item.prop">
					<template v-slot="scope">
						<template v-if="item.format == 'progress'">
							<el-progress :percentage="Number(calcCheng(scope.row[item.prop], 100).toFixed(1))"
								:color="customColorMethod">
							</el-progress> 
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<v-pagination :dataTotal="dataTotal" :curPage="postData.curPage" :pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage" @getPageSize="getPaginationPageSize">
		</v-pagination>
	</div>
</template>

<script>
	import {
		fetchData
	} from '@/api/index.js'
	import vPagination from '../../../../common/Pagination.vue';
	import vToolBar from '../../toolbar/Toolbar.vue';
	import tableColumns from './FileSystemColumns.js';
	import bus from 'common/bus.js';

	export default {
		name: 'fileSystem',
		components: {
			vPagination,
			vToolBar
		},
		data() {
			return {
				postData: {
					opera: 'fileSystem',
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: '',
						sortOrders: ''
					},
					filtersType: 'exactquery',
					filters: {}
				},
				tableData: [],
				dataTotal: 0,
				tableColumns: tableColumns,
				SearchIPArr: [],
				searchJson: {},
				SearchIP: '',
				timerName: 'MonitorInfoDataBaseOracleFileSystem',
				timerEventName: 'timerMonitorInfoDataBaseOracleFileSystem',
				// timerInterval: 1000 * 60,
				loading: true,
				selectedMonID: ''
			}
		},
		created() {

			this.selectedMonID = this.$store.getters["ItemMonitorOracle/getItem"];

			this.postData.filters.ip = this.selectedMonID.IP;
			this.getTableData()


			bus.$emit('timerNewTodo', {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0
			});

			bus.$on(this.timerEventName, msg => {
				if (msg.isGetData) {
					this.getTableData();
				}
			});
		},
		mounted() {
			bus.$on("ItemMonitorOracle", msg => {
				this.resetData();
				this.selectedMonID = msg;
				this.postData.filters.ip = this.selectedMonID.IP;

				this.getTableData()


			})
		},
		computed: {
			postDataFn() {
				return {
					postData: JSON.stringify(this.postData)
				}
			},
			timerInterval() {
				return Number(this.$store.state.pageRefresh) * 1000
			}
		},
		methods: {
			customColorMethod(percentage) {
				if (percentage <= 50) {
					return '#67c23a';
				} else if (percentage <= 75) {
					return '#e6a23c';
				} else {
					return '#f56c6c';
				}
			},
			getTableData() {
				this.loading = true;

				fetchData({
					postData: JSON.stringify(this.postData)
				}).then((res) => {
					this.dataTotal = res.dataTotal;
					this.tableData = res.data;

					this.loading = false;
				});
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;
				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getTableData();
			},
			getToolBarSearchIPArr(arr) {
				// 获取搜索IP关键字
				this.SearchIPArr = arr;

				this.postData.curPage = 1;
				if (this.SearchIPArr.length > 0) {
					this.postData.filters = {
						ip: this.SearchIPArr
					};
				} else {
					this.postData.filters = {};
				}

				this.getTableData();
			},
			getToolBarSearchIP(str) {
				// 获取搜索IP关键字
				this.SearchIP = str;
				this.postData.curPage = 1;
				this.postData.filters = {
					ip: this.SearchIP
				};
				this.getTableData();
			},
			getChangeLie(val) {
				// 遍历表格列
				this.tableColumns.map((item, index) => {
					// 列的显示隐藏状态改变
					item.isShow = val.includes(item.label);
				});
			},
			resetData() {
				this.dataTotal = 0;
				this.tableData = [];

			}
		},
		watch: {

		},
		beforeDestroy() {
			// 页面关闭前，移除定时器任务
			bus.$emit('timerNewTodo', {
				name: this.timerName
			});
		},
	}
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>